.notification {
  align-items: center;
  background: #f5f3ff;
  border-radius: 2px;
  color: $black;
  display: flex;
  margin: 40px 0 10px;
  padding: 6px 13px;
  transition: all 0.2s ease-in-out;

  &:hover {
    background: #f0eefa;
    color: $black;
    text-decoration: none;
  }

  & .notification-tag {
    margin: -1px 18px 0 0;
    flex-shrink: 0;

    & span {
      border: 1px solid $terraform;
      background-color: $white;
      border-radius: 2px;
      padding: 3px 11px;
    }

    @media (min-width: $screen-md-min) {
      margin-right: 32px;
    }
  }

  & .notification-text {
    text-align: left;
  }

  .notification-link {
    align-items: center;
    color: $terraform;
    display: none;
    margin-left: 32px;
    text-decoration: underline;

    @media (min-width: $screen-md-min) {
      display: inline-flex;
    }
  }

  svg {
    margin: 0 10px 0 16px;
  }
}
